<template>
  <div class="about" id="abouts">
    <Childtest></Childtest>
    <el-button @click="pushRoute">跳转</el-button>
    <el-select v-model="value" placeholder="请选择" @change="changeSelect">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <img src="images/logo.png" :onerror="onerrorurl" />
    <div class="flex">
      <!-- 水球图1 -->
      <div id="shuiqiutu1" style="width: 100%; height: 500px"></div>
      <!-- 水球图2 -->
      <div id="shuiqiutu2" style="width: 100%; height: 500px"></div>
    </div>

    <!-- 环形图1 -->
    <div id="huanxingtu1" style="width: 100%; height: 500px"></div>
    <!-- 环形图2 -->
    <div id="huanxingtu2" style="width: 100%; height: 500px"></div>
    <!-- 环形图2 -->
    <div id="huanxingtu3" style="width: 50%; height: 50%"></div>
    <!-- 仪表图1 -->
    <div id="yibiaotu1" style="width: 50%; height: 20%"></div>
    <!-- 折线图 -->
    <div id="zhexiantu" style="width: 100%; height: 500px"></div>
    <!-- 折线图 -->
    <div id="zhexiantu2" style="width: 100%; height: 500px"></div>
    <div id="weikaohe" style="width: 100%; height: 500px"></div>
    <el-dropdown>
      <el-button type="primary">
        更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>黄金糕</el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item>双皮奶</el-dropdown-item>
        <el-dropdown-item>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <div id="test">
      <el-button @click="getImg" style="margin-top: 50px">截图</el-button>
    </div>
    <img :src="imgurl" alt="" style="width: 500px" />
    <div @click="goTop">回到顶部</div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import html2canvas from "html2canvas";
import logoImg from "@/assets/image/logo.png";
import yiBiaoPanImg from "@/assets/image/yibiaopan.png";
import personage from "@/assets/image/personage.png";
import "echarts-liquidfill";
import Childtest from "./childTest.vue";

export default {
  data() {
    return {        
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
      imgurl: "",
      onerrorurl:
        'this.src = "' + require("@/assets/image/yibiaopan.png") + ' "',
    };
  },
  components: {
    // Childtest,
    Childtest:()=>import(/* webpackChunkName: "childTest" */"./childTest.vue"),
  },
  methods: {
    changeSelect(val,a) {
    console.log("🚀 ~ file: About.vue:93 ~ changeSelect ~ val,a:", val,a)

    },
    pushRoute() {
      this.$router.push({
        name: "calendar",
        params: {
          id:999
        }
        }
      )
    },
    goTop() {
      //  document.documentElement.scrollTop = document.body.scrollTop = 0;
      scrollTo(0,0)
      console.log(99);
      return
    },
    getImg() {
      html2canvas(document.getElementById("abouts"), {
        // backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
        useCORS: true, //支持图片跨域
        scale: 1, //设置放大的倍数
        // height: 500,
        // width:800
      }).then((canvas) => {
        // //截图用img元素承装，显示在页面的上
        let img = new Image();
        img.src = canvas.toDataURL("image/jpeg"); // toDataURL :图片格式转成 base64
        document.getElementById("test").appendChild(img);

        //如果你需要下载截图，可以使用a标签进行下载
        let a = document.createElement("a");
        a.href = canvas.toDataURL("image/jpeg");
        console.log(999, canvas.toDataURL("image/jpeg"));
        let str = canvas.toDataURL("image/jpeg") + "&437463275675687";
        console.log(888, str);
        str = str.substring(0, str.indexOf("&"));
        console.log("ruslut", str);
        a.download = "test";
        a.click();
      });
    },
    // 水球图1
    shuiqiutuEcharts1() {
      let myChart = echarts.init(document.getElementById("shuiqiutu1"));
      let option = {
        backgroundColor: "#072f57",
        title: {
          text: "",
          textStyle: {
            fontWeight: "normal",
            fontSize: 25,
            color: "rgb(97, 142, 205)",
          },
        },
        series: [
          {
            type: "liquidFill",
            radius: "45%",
            center: ["50%", "50%"],
            data: [0.6, 0.6], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: "rgba(28, 141, 255, 0.09)",
            },
            // 修改波浪颜色
            // color:['yellow'], //所有波浪一个颜色
            color: ["#0c4381", "#145ab3"], //每个波浪不同颜色，颜色数组长度为对应的波浪个数
            label: {
              normal: {
                formatter: 0.5 * 100 + "%",
                textStyle: {
                  fontSize: 50,
                  color: "#145ab3",
                },
              },
            },
            outline: {
              show: false,
            },
          },
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["50%", "52%"],
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: 500,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(29, 141, 253, 0.6)",
                    },
                    {
                      offset: 1,
                      color: "rgba(29, 160, 253, 1)",
                    },
                  ]),
                },
                emphasis: {
                  labelLine: {
                    show: false,
                  },
                  itemStyle: {
                    color: "rgba(29, 160, 253, 1)",
                  },
                },
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    // 水球图2
    shuiqiutuEcharts2() {
      let myChart = echarts.init(document.getElementById("shuiqiutu2"));
      let option = {
        backgroundColor: "#072f57",
        // title: {
        //   text: "",
        //   textStyle: {
        //     fontWeight: "normal",
        //     fontSize: 50,
        //     color: "rgb(97, 142, 205)",
        //   },
        // },
        series: [
          {
            type: "liquidFill",
            radius: "45%",
            center: ["50%", "50%"],
            data: [0.5, 0.5], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: "#093f66",
            },
            // 修改波浪颜色
            // color:['yellow'], //所有波浪一个颜色
            color: ["#0d5681", "#1883b3"], //每个波浪不同颜色，颜色数组长度为对应的波浪个数
            label: {
              normal: {
                formatter: 0.5 * 100 + "%",
                textStyle: {
                  fontSize: 50,
                  color: "#1883b3",
                },
              },
            },
            outline: {
              show: false,
            },
          },
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["50%", "52%"],
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: 500,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  // color: "#1571c6",
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(29, 169, 253, 0.6)",
                    },
                    {
                      offset: 1,
                      color: "rgba(29, 207, 253, 1)",
                    },
                  ]),
                },
                emphasis: {
                  labelLine: {
                    show: false,
                  },
                  itemStyle: {
                    color: "rgba(29, 207, 253, 1)",
                  },
                },
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    // 环形图1
    echartsDot() {
      let myChart = echarts.init(document.getElementById("huanxingtu1"));
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          top: 100,
          padding: [0, 0, 0, 0],
          selectedMode: false, // 取消图例点击事件
          data: ["直接访问22", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["57%", "65%"],
            hoverOffset: 20,
            // hoverOffset: 10,
            // hoverAnimation: false,
            // center: [70, 60],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            itemStyle: {
              borderRadius: 10, // 环形图圆角
              borderColor: "#fff", // 边框颜色
              borderWidth: 1, // 边框宽度
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 335, name: "直接访问22" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎" },
            ],
          },
        ],
      };
      // window.onresize = () => {
      //   myChart.resize();
      // };
      myChart.setOption(option);
    },

    // 环形图2
    echartsDot2() {
      let myChart = echarts.init(document.getElementById("huanxingtu2"));
      let option = {
        backgroundColor: "#062f56",
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        color: [
          "#ff4343",
          "#5045f6",
          "#ad46f3",
          "#f69846",
          "#4777f5",
          "#f6d54a",
          "#45dbf7",
          "#44aff0",
          "#f845f1",
        ],
        lineWidth: 1,
        graphic: {
          elements: [
            {
              type: "image",
              z: 6,
              style: {
                // image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile03.16sucai.com%2F2017%2F1100%2F16sucai_v566c087_467.JPG&refer=http%3A%2F%2Ffile03.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638775569&t=0aa3cdec520c32950fe175e04001a04d",
                // image: logoImg,
                image: personage,
                width: "60",
                shadowBlur: 0,
                shadowColor: "#000",
                shadowOffsetX: "1",
                shadowOffsetY: "1",
              },
              left: "center",
              top: "45%",
              position: [100, 100],
            },
          ],
        },
        legend: {
          orient: "vertical",
          // x: 'right',
          // right:'5%',
          top: "center",
          right: "0",
          textStyle: {
            color: "#fff",
          },
          // padding: [0, 0, 0, 0],
          selectedMode: false, // 取消图例点击事件
          data: ["直接访问22", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        },
        series: [
          {
            name: "外面的环形",
            type: "pie",
            radius: ["54%", "62%"],
            hoverAnimation: false, //鼠标经过的特效
            avoidLabelOverlap: false,
            emphasis: {
              // 鼠标悬停时的样式
              label: {
                show: false,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              // borderRadius: 10, // 环形图圆角
              borderColor: "#062f56", // 边框颜色
              borderWidth: 5, // 边框宽度
            },
            data: [
              { value: 335, name: "直接访问22" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎" },
            ],
          },

          {
            name: "里面的环形",
            type: "pie",
            radius: ["35%", "48%"],
            tooltip: {
              show: false,
            },
            hoverAnimation: false,
            avoidLabelOverlap: false,
            emphasis: {
              label: {
                show: false,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            itemStyle: {
              color: "#175b88",
            },
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 335, name: "直接访问22" },
              // { value: 310, name: "邮件营销" },
              // { value: 234, name: "联盟广告" },
              // { value: 135, name: "视频广告" },
              // { value: 1548, name: "搜索引擎" },
            ],
          },

          {
            type: "pie",
            radius: ["25%", "0%"],
            center: ["50%", "50%"],
            tooltip: {
              show: false,
            },
            z: 0,
            data: [
              {
                hoverOffset: 1,
                value: 100,
                itemStyle: {
                  color: "#175b88",
                },
                label: {
                  show: false,
                },
                labelLine: {
                  normal: {
                    smooth: true,
                    lineStyle: {
                      width: 0,
                    },
                  },
                },
                hoverAnimation: false,
              },
            ],
          },
        ],
      };
      // window.onresize = () => {
      //   myChart.resize();
      // };
      myChart.setOption(option);
    },

    // 环形图3
    echartsDot3() {
      let myChart = echarts.init(document.getElementById("huanxingtu3"));
      let option = {
        title: [
          {
            text: "已完成",
            x: "center",
            top: "55%",
            textStyle: {
              color: "#FFFFFF",
              fontSize: 16,
              fontWeight: "100",
            },
          },
          {
            text: "60%",
            // formatter:"{d}%"
            x: "center",
            y: "center",
            textStyle: {
              fontSize: "60",
              color: "#FFFFFF",
              fontFamily: "DINAlternate-Bold, DINAlternate",
              foontWeight: "600",
            },
          },
        ],
        backgroundColor: "#111",
        polar: {
          radius: ["42%", "52%"],
          center: ["50%", "50%"],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        color: ["#FCCE4A", "red"],

        series: [
          {
            name: "",
            type: "bar",
            roundCap: true,
            barWidth: 30,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(66, 66, 66, .3)",
            },
            data: [60],
            coordinateSystem: "polar",
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 10,
                borderColor: "#FCCE4A",
                shadowColor: "#FCCE4A",
                // color: '#FCCE4A'
              },
            },
          },
          {
            name: "",
            type: "pie",
            startAngle: 80,
            radius: ["38%"],
            hoverAnimation: false,
            center: ["50%", "50%"],
            itemStyle: {
              color: "rgba(66, 66, 66, .1)",
              borderWidth: 1,
              borderColor: "#FCCE4A",
            },
            data: [100],
          },
        ],
      };
      myChart.setOption(option);
    },

    // 仪表图
    echartshuanxingtu() {
      let myChart = echarts.init(document.getElementById("yibiaotu1"));
      let data = [{ name: "任务完成", value: 123, sum: 234 }];
      let img = yiBiaoPanImg;
      // let img =
      //   "";
      let option = {
        backgroundColor: "#000",
        graphic: [
          {
            type: "image",
            left: "center",
            top: "center",
            z: 100,
            style: {
              image: img,
              width: 237,
              height: 112,
            },
          },
        ],
        series: [
          {
            name: "Pressure",
            type: "gauge",
            radius: "5%",
            center: ["50%", "70%"],
            startAngle: 290,
            endAngle: 0,
            max: data[0].sum,
            detail: {
              show: 0,
              formatter: "{value}",
            },
            pointer: {
              length: 60,
              width: 8,
            },
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#FFC200", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#FF4200", // 100% 处的颜色
                  },
                ],
              },
            },
            title: {
              offsetCenter: [0, "50"],
              color: "#fff",
              fontSize: 24,
            },
            axisLine: {
              show: 0,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            data: data,
            z: 9999,
          },
        ],
      };
      myChart.setOption(option);
    },

    // 折线图
    zheXianTu() {
      let myChart = echarts.init(document.getElementById("zhexiantu"));
      let option = {
        title: {
          text: "折线图堆叠",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          icon: "rect", //  字段控制形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 15, // 设置宽度
          itemHeight: 6, // 设置高度
          itemGap: 40, // 设置间距
          data: ["邮件营销", "联盟广告"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {}, // 下载截图
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: true, // x轴数据与y轴之间留白
          axisLine: {
            show: true, // 轴线
          },
          axisTick: {
            show: false, // 刻度线
          },
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
          name: "单位(天)",
          nameTextStyle: {
            color: "blue",
          },
        },
        series: [
          {
            name: "邮件营销",
            type: "line",
            stack: "总量",
            smooth: true, // 是否圆滑
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "联盟广告",
            type: "line",
            stack: "总量",
            smooth: true,
            data: [220, 182, 191, 234, 290, 330, 310],
          },
        ],
      };
      // window.onresize = () => {
      //   myChart.resize();
      // };
      myChart.setOption(option);
    },

    // 折线图2 间隔小
    zheXianTu2() {
      let valueList = [1, 2, 3, 1, 2, 3, 1];
      let myChart = echarts.init(document.getElementById("zhexiantu2"));
      let option = {
        title: {
          text: "折线图堆叠",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          icon: "rect", //  字段控制形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 15, // 设置宽度
          itemHeight: 6, // 设置高度
          itemGap: 40, // 设置间距
          data: ["邮件营销", "联盟广告"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {}, // 下载截图
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: true, // x轴数据与y轴之间留白
          axisLine: {
            show: true, // 轴线
          },
          axisTick: {
            show: false, // 刻度线
          },
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
          name: "单位(天)",
          max: 5, // 下面会有判断,y轴数据最大值小于4,防止间隔太小,max才生效
          min: 0,
          boundaryGap: [0.3, 0.3],
          minInterval: 1, // 最小间隔,不会出现0.5
        },
        series: [
          {
            name: "邮件营销",
            type: "line",
            stack: "总量",
            smooth: true, // 是否圆滑
            data: valueList,
          },
        ],
      };
      // 数据最大值小于4,就设置y轴的最大值,不然间隔只有1/2/3个,不美观
      Math.max.apply(null, valueList) > 4 ? delete option.yAxis.max : "";
      myChart.setOption(option);
    },
    weikaohe() {
      let myChart = echarts.init(document.getElementById("weikaohe"));
      let placeHolderStyle = {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: "rgba(0,0,0,0)",
          borderWidth: 0,
        },
        emphasis: {
          color: "rgba(0,0,0,0)",
          borderWidth: 0,
        },
      };

      let dataStyle = {
        normal: {
          formatter: "{d}%",
          position: "center",
          show: true,
          textStyle: {
            fontSize: "40",
            // fontWeight: "normal",
            color: "#34374E",
          },
        },
      };

      let option = {
        //第一个图表
        series: [
          {
            type: "pie",
            hoverAnimation: false, //鼠标经过的特效
            radius: ["25%", "30%"],
            center: ["30%", "50%"],
            startAngle: 90,
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 100,
                itemStyle: {
                  normal: {
                    color: "#ccc",
                  },
                },
                // label: "none",
              },
            ],
          },
          //上层环形配置
          {
            type: "pie",
            hoverAnimation: false, //鼠标经过的特效
            radius: ["25%", "30%"],
            center: ["30%", "50%"],
            zlevel: 100,
            startAngle: 90,
            labelLine: {
              normal: {
                show: false,
              },
            },
            label: {
              normal: {
                position: "center",
              },
            },
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              {
                value: 85,
                itemStyle: {
                  normal: {
                    color: "#6F78CC",
                  },
                },
                label: dataStyle,
              },
              {
                value: 65,
                itemStyle: placeHolderStyle,
                label: {
                  normal: {
                    show: false,
                  },
                },
              },
            ],
          },
        ],
      };

      // var option = {
      //   color: ["pink", "#ccc"],
      //   series: [
      //     {
      //       name: "XXX站点超标率",
      //       type: "pie",
      //       center: ["50%", "50%"], // 饼图的圆心坐标
      //       radius: ["70%", "80%"],
      //       avoidLabelOverlap: false,
      //       hoverAnimation: false,
      //       label: {
      //         //  饼图图形上的文本标签
      //         normal: {
      //           // normal 是图形在默认状态下的样式
      //           show: true,
      //           position: "center",
      //           fontWeight: "bold",
      //           formatter: " {a|{d}%}\n{b|{b}}", // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容，
      //           rich: {
      //             a: {
      //               color: "#03a9f4",
      //               padding: [0, 10],
      //               fontSize: 40,
      //             },
      //             b: {
      //               color: "red",
      //               padding: [0, 10],
      //               fontSize: 20,
      //             },
      //           },
      //         },
      //       },

      //       labelLine: {
      //         normal: {
      //           show: false,
      //         },
      //       },
      //       itemStyle: {
      //         // borderRadius: 4,
      //       },
      //       data: [
      //         {
      //           value: 40,
      //           name: "超标",
      //           label: {
      //             normal: {
      //               show: true,
      //             },
      //           },
      //         },
      //         {
      //           value: 60,
      //           name: "正常",
      //           label: {
      //             normal: {
      //               show: false,
      //             },
      //           },
      //         },
      //       ],
      //     },
      //   ],
      // };

      myChart.setOption(option);
    },
  },
  mounted() {
    // base64编码回显图片
    this.$nextTick(() => {
      // 图表自适应
      window.onresize = function () {
        echarts.init(document.getElementById("huanxingtu1")).resize();
        echarts.init(document.getElementById("huanxingtu2")).resize();
        echarts.init(document.getElementById("zhexiantu")).resize();
        echarts.init(document.getElementById("zhexiantu2")).resize();
      };
      this.echartsDot(); // 环形图1
      this.echartsDot2(); // 环形图2
      this.echartsDot3();
      this.echartshuanxingtu(); //仪表图
      this.zheXianTu();
      this.zheXianTu2();
      this.weikaohe();
      window.onresize();
    });
    this.shuiqiutuEcharts1(); // 水球图1
    this.shuiqiutuEcharts2(); // 水球图2
  },
};
</script>
<style lang="less">
.about {
  width: 1000px;
  height: 800px;
  .flex {
    display: flex;
  }
}
</style>
